<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BFC规范和浏览器差异</title>

        <style>
            /* BFC(Box Formatting Context,块级格式化上下文)是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然*/
            
            /* 一个盒子不设置height，当内容子元素都浮动时，无法撑起自身
               形成这个现象的原因是因为这个盒子没有形成BFC
            */
            /* 如何创建BFC
                  - 方法1：float的值不是none
                  - 方法2：position的值不是static或者relative
                  - 方法3：display的值是inline-block、flex或者inline-flex
                  - 方法4：overflow:hidden； 
            */
            .box {
                width: 400px;
                border: 10px solid #000;
                /* 方法1：float的值不是none */
                /* float: left; */
                /* 方法2: position的值不是static或者relaltive */
                /* position:absolute; */
                /* 方法3：display的值是inline-block、flex或者inline-flex */
                /* display: inline-block */
                /* 方法4: overflow:hidden; */
                overflow:hidden;
            }
            .box .c1 {
                width: 200px;
                height: 200px;
                background-color: orange;
                float: left;
            }
            .box .c2 {
                width: 200px;
                height: 200px;
                background-color: blue;
                float: left;
            }

            /* 浏览器差异
                   - IE6、7浏览器使用haslayout机制，和BFC规范略有差异，比如IE浏览器可以只用zoom：1属性 "让盒子拥有layout"
                   - 如果要制作兼容到IE6、7的网页时，尽量让网页布局变得简单，内部有浮动的盒子要设置height属性，规范编程，不要“玩杂技”
            */
        </style>
    </head>
    <body>
        <div class="box">
            <div class="c1"></div>
            <div class="c2"></div>
        </div>
    </body>
</html>